<template>
  <div class="commission-item-row">
    <div class="commission-item" v-for="(footmark) in footmarkList" :style="{width: itemWidth + 'px'}"
         @click="itemClick(footmark)"
         v-bind:key="footmark.itemId">
      <image :src="footmark.itemPicUrl" :style="{width: itemWidth + 'px', height: itemWidth + 'px'}"  resize="cover" class="item-pic"></image>
      <div class="item-title">
        <image :src="getPlatformIcon(footmark.itemEcomPlat)" class="item-title-icon"></image>
        <text class="item-title-text">     {{footmark.itemTitle}}</text>
      </div>
      <div class="detail-row">
        <div class="price">
          <text class="price-y">¥</text>
          <text class="price-val">{{footmark.itemPrice}}</text>
        </div>
        <text class="origin-price">¥{{footmark.itemOriginPrice}}</text>
      </div>
      <div class="topbar">
        <text class="btn btn-primary topbar-btn btn-md btn-del" v-if="showDelBtn" @click="delClick(footmark)">删除</text>
      </div>
    </div>
  </div>
</template>
<script>
let paddingValue = [0, 12]
let urlPath = require('../include/url-path')
require('../include/page-xdom')
module.exports = {
  components: {
  },
  props: {
    footmarkList: {default: []},
    column: {default: 2},
    showDelBtn: {default: false},
    showSelBtn: {default: false}
  },

  data () {
    return {
      itemWidth: 750
    }
  },
  created () {
    this.itemWidth = (750 - paddingValue[this.column - 1]) / this.column
  },
  methods: {
    itemClick (footmark) {
      this.$emit('footmarkClick', footmark)
    },
    delClick (footmark) {
      this.$emit('footmarkDel', footmark)
    },
    getPlatformIcon (ecomPlat) {
      return urlPath.assets('images/icon/platform/' + ecomPlat + '.png')
    }
  }
}
</script>
<style lang="scss">

  @import "../sass/var";
  @import "../sass/mixin";
  @import "../sass/icon";
  @import "../sass/buttons";

  .commission-item-row {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .item-title {
    padding: 10px;
    padding-bottom: 10px;
    &-text {
      font-size: 28px;
      color: $color;
      line-height: 32px;
      lines: 2;
      text-overflow: ellipsis;
    }

    &-icon {
      width: 32px;
      height: 32px;
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }

  .commission-item {
    background-color: #fff;
    position: relative;
  }

  .topbar {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    left: 0;
    align-items: center;
    justify-content: flex-end;
    justify-items: flex-end;
    flex-direction: row;
    &-btn {
      margin-left: 10px
    }
  }

  .detail-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
    align-items: flex-end;
  }

  .sales-row {
    margin-bottom: 0;
  }

  .origin-price {
    color: $color-muted;
    font-size: 24px;
    text-decoration: line-through;
    font-weight: 100;
  }
  .price {
    flex-direction: row;
    align-items: flex-end;
    &-y {
      font-size: 24px;
      color: $color-primary;
      font-weight: 100;
    }
    &-val {
      color: $color-primary;
      font-size: 32px;
    }
  }

  .btn-del{
    font-size: 28px;
    color: #FFFFFF;
  }
  .btn-select {
  }
</style>
